<template>
  <div class="findAlumni">
    <div style="background: #fff">
      <u-tabs
        :list="list2"
        itemStyle="width: 50%; height: 34px;"
        lineWidth="32"
        activeStyle="color:#3c9cff;"
        inactiveStyle="color:#9b9c9f;"
        @change="changeTabs"
        :current="current"
      ></u-tabs>
    </div>
    <div class="content">
      <!-- 搜索 -->
      <div class="searchPage" v-if="current == 1 ? false : true">
        <u--form labelPosition="left" :model="model1" ref="form1">
          <div
            class="modele1"
            style="background: white; width: 100%; padding: 0px 10px"
          >
            <!-- 姓名 -->
            <u-form-item borderBottom ref="item1">
              <template slot="label">
                <div :style="{ marginLeft: '10px', width: '90px' }">
                  姓名 ：
                </div>
              </template>
              <u--input
                v-model="model1.userInfo.name"
                border="none"
                placeholder="请输入姓名"
              ></u--input>
            </u-form-item>
            <!-- 入校类型 -->
            <u-form-item borderBottom ref="item1" prop="userInfo.type" required>
              <template
                slot="label"
                style="display: flex; width: 100px; padding-left: 10px"
              >
                <div
                  :style="{
                    marginLeft: '4px',
                    fontSize: '15px',
                  }"
                >
                  入校类型 ：
                </div>
              </template>
              <div style="display: flex" @click="show1 = true">
                <u--input
                  v-model="model1.userInfo.type"
                  disabled
                  disabledColor="#ffffff"
                  placeholder="请选择"
                  border="none"
                ></u--input>

                <div
                  @click.stop="clearContent"
                  style="display: flex; align-items: center"
                >
                  <u-icon
                    :name="iconClear"
                    v-if="model1.userInfo.type"
                  ></u-icon>
                </div>
                <u-icon slot="right" name="arrow-right"></u-icon>
              </div>
            </u-form-item>
            <!-- 班级 -->
            <u-form-item borderBottom ref="item1">
              <template slot="label">
                <div :style="{ marginLeft: '10px', width: '90px' }">
                  班级 ：
                </div>
              </template>
              <u--input
                v-model="model1.userInfo.class"
                border="none"
                placeholder="请填写班级,不限年份"
              ></u--input>
            </u-form-item>
            <!-- 居住地 -->
            <u-form-item borderBottom ref="item1">
              <template slot="label">
                <div :style="{ marginLeft: '10px', width: '90px' }">
                  居住地 ：
                </div>
              </template>
              <u--input
                v-model="model1.userInfo.address"
                border="none"
                placeholder="选填一级:大洲/国家/省/市/地"
              ></u--input>
            </u-form-item>
            <!-- 行业 -->
            <u-form-item
              borderBottom
              ref="item1"
              prop="userInfo.hangye"
              required
            >
              <template
                slot="label"
                style="display: flex; width: 100px; padding-left: 10px"
              >
                <div
                  :style="{
                    marginLeft: '4px',
                    fontSize: '15px',
                  }"
                >
                  行业 ：
                </div>
              </template>
              <div style="display: flex" @click="show3 = true">
                <u--input
                  v-model="model1.userInfo.hangye"
                  disabled
                  disabledColor="#ffffff"
                  placeholder="请选择行业"
                  border="none"
                ></u--input>

                <div
                  @click.stop="clearContent"
                  style="display: flex; align-items: center"
                >
                  <u-icon
                    :name="iconClear"
                    v-if="model1.userInfo.hangye"
                  ></u-icon>
                </div>
                <u-icon slot="right" name="arrow-right"></u-icon>
              </div>
            </u-form-item>
            <!-- 单位 -->
            <u-form-item borderBottom ref="item1">
              <template slot="label">
                <div :style="{ marginLeft: '10px', width: '90px' }">
                  单位 ：
                </div>
              </template>
              <u--input
                v-model="model1.userInfo.danwei"
                border="none"
                placeholder="请填写单位"
              ></u--input>
            </u-form-item>
          </div>
        </u--form>
        <!-- 按钮 -->
        <div
          class="btn_box"
          style="
            padding: 20px 10px;
            box-sizing: border-box;
            background: white;
            width: 100%;
          "
        >
          <button
            @click="clickSearch"
            class="btn"
            style="background: #1990ff; color: white; border-radius: 10px"
          >
            查找
          </button>
        </div>
        <!-- 类型选择器 -->
        <u-picker
          :show="show1"
          :columns="columns1"
          closeOnClickOverlay="true"
          @close="show1 = false"
          @confirm="pickerConfirm1"
          @cancel="show1 = false"
        >
        </u-picker>
        <!-- 院系选择器 -->
        <u-picker
          :show="show2"
          :columns="columns2"
          closeOnClickOverlay="true"
          @close="show2 = false"
          @confirm="pickerConfirm2"
          @cancel="show2 = false"
        >
        </u-picker>
        <!-- 行业选择器 -->
        <u-picker
          :show="show3"
          :columns="columns3"
          closeOnClickOverlay="true"
          @close="show3 = false"
          @confirm="pickerConfirm3"
          @cancel="show3 = false"
        >
        </u-picker>
      </div>
      <!-- 同学 -->
      <div class="studentsPage" v-else>
        <!-- 条件区域 -->
        <div class="model1">
          <div class="conditions_box">
            <div class="title" style="font-weight: 600">学籍：</div>
            <div class="conditions">1991都高高中部148班</div>
          </div>
          <div class="conditions_box2">共有<span>87</span>名同学</div>
        </div>
        <!-- 校友信息 -->
        <div class="model2">
          <div class="top" @click="goStudentDetails">
            <div class="top_title">
              <div class="name" style="font-weight: 600">童学</div>
              <div class="state" style="color: #898989; font-size: 13px">
                (未注册)
              </div>
            </div>
            <div class="list">- 1982都高初中部21班</div>
            <div class="list">- 1982都高初中部21班</div>
            <div class="list">- 1982都高初中部21班</div>
          </div>
          <div class="bottom">
            <u--text text="未添加" color="#898989" size="13"></u--text>
            <button
              type="primary"
              style="
                background: #1684fc;
                width: 80px;
                line-height: 40px;
                height: 40px;
              "
            >
              添加
            </button>
          </div>
        </div>
        <!-- 校友信息 -->
        <div class="model2">
          <div class="top">
            <div class="top_title">
              <div class="name" style="font-weight: 600">童学</div>
              <div class="state" style="color: #898989; font-size: 13px">
                (未注册)
              </div>
            </div>
            <div class="list">- 1982都高初中部21班</div>
            <div class="list">- 1982都高初中部21班</div>
            <div class="list">- 1982都高初中部21班</div>
          </div>
          <div class="bottom">
            <u--text text="未添加" color="#898989" size="13"></u--text>
            <button
              type="primary"
              style="
                background: #1684fc;
                width: 80px;
                line-height: 40px;
                height: 40px;
              "
            >
              添加
            </button>
          </div>
        </div>
        <!-- 校友信息 -->
        <div class="model2">
          <div class="top">
            <div class="top_title">
              <div class="name" style="font-weight: 600">童学</div>
              <div class="state" style="color: #898989; font-size: 13px">
                (未注册)
              </div>
            </div>
            <div class="list">- 1982都高初中部21班</div>
            <div class="list">- 1982都高初中部21班</div>
            <div class="list">- 1982都高初中部21班</div>
          </div>
          <div class="bottom">
            <u--text text="未添加" color="#898989" size="13"></u--text>
            <button
              type="primary"
              style="
                background: #1684fc;
                width: 80px;
                line-height: 40px;
                height: 40px;
              "
            >
              添加
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //头部切换
      list2: [{ name: "搜索" }, { name: "同学", disabled: true }],
      current: 0,
      //选择器
      show1: false,
      columns1: [["不限", "软件和信息行业", "金融业"]],
      show2: false,
      columns2: [["不限年份，不限院系", "软件和信息行业", "金融业"]],
      show3: false,
      columns3: [["不限", "制造行业", "软件和信息行业", "金融业"]],
      //清除图标
      iconClear: require("@/static/index/icon_clear.png"),
      model1: {
        userInfo: {
          name: "", //姓名
          type: "", //入校类型
          class: "", //入校院系
          address: "", //居住地
          hangye: "", //行业
          danwei: "", //单位
        },
      },
    };
  },
  methods: {
    //头部切换
    changeTabs(item) {
      console.log(item);
      this.current = item.index;
    },
    //类型选择器
    pickerConfirm1(n) {
      console.log(n, "确定");
      this.model1.userInfo.type = n.value[0];
      this.show1 = false;
    },
    pickerConfirm2(n) {
      console.log(n, "确定");
      this.model1.userInfo.class = n.value[0];
      this.show2 = false;
    },
    pickerConfirm3(n) {
      console.log(n, "确定");
      this.model1.userInfo.hangye = n.value[0];
      this.show3 = false;
    },
    //清除选择内容
    clearContent() {
      if (
        this.model1.userInfo.type != "" ||
        this.model1.userInfo.class != "" ||
        this.model1.userInfo.hangye != ""
      ) {
        this.show1 = false;
        this.show2 = false;
        this.show3 = false;
        this.model1.userInfo.type = "";
        this.model1.userInfo.class = "";
        this.model1.userInfo.hangye = "";
      } else {
        this.model1.userInfo.type = "";
        this.model1.userInfo.class = "";
        this.model1.userInfo.hangye = "";
        this.show1 = false;
        this.show2 = false;
        this.show3 = false;
      }
    },
    //查找按钮
    clickSearch() {
      this.current = 1;
    },
    //查看校友信息
    goStudentDetails() {
      uni.navigateTo({
        url: "/pages/findAlumni/studentDetails",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.findAlumni {
  width: 100%;
  height: 100vh;
  background: #eef2fb;
  .content {
    margin-top: 10px;
    /* 同学 */
    .studentsPage {
      .model1 {
        margin-bottom: 10px;
        background: white;
        .conditions_box {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #ccc;
          height: 50px;
          padding: 10px 15px;
          .title {
            margin-right: 20px;
          }
        }
        .conditions_box2 {
          height: 50px;
          line-height: 50px;
          padding-left: 10px;
          font-size: 12px;
          color: #acacac;
        }
      }
      .model2 {
        background: white;
        margin-bottom: 10px;
        .top {
          padding: 15px 15px;
          border-bottom: 1px solid #ccc;
          .top_title {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
          }
          .list {
            line-height: 26px;
            /* color: #756c88; */
          }
        }

        .bottom {
          display: flex;
          justify-content: space-between;
          padding: 15px 15px;
        }
      }
    }
  }
}
</style>